<template>
  <!-- blog -->
  <div class="blog-box">
    <!-- search -->
    <div class="blog-search-box">
      <input v-model="searchValue" type="text" placeholder="Search the blog" />
      <i @click="searchHandle" class="el-icon-search"></i>
    </div>
    <!-- content -->
    <div style="overflow: hidden;margin-bottom: 50px">
      <el-row :gutter="30">
        <el-col :sm="12" :xs="24">
          <div class="blog-container">
            <el-image :src="require('_a/Content/8.jpg')"></el-image>
            <div class="item-box">
              <h3>
                {{
                  "Nike FC Barcelona Daybreak capsule collection: Inspired by those who rise higher"
                }}
              </h3>
              <p>
                {{
                  "Nike launches a new FC Barcelona capsule collection, exclusive to NighShop, that transcends the confines of the pitch, paying homage to the Mediterranean metropolis, its rising talents and the constant evolution of the bustling city the club calls home.Paulo Sagana, photo courtesy of NikeAnsu fati, photo courtesy of NikeBarcelona: A city of sun, sport &"
                }}
              </p>
              <span @click="_click(1)">{{ "Read More..." }}</span>
              <div class="data-box">
                {{ "Oct 08, 2020" }}
              </div>
            </div>
          </div>
        </el-col>
        <el-col :sm="12" :xs="24">
          <div class="blog-container">
            <el-image :src="require('_a/Content/9.jpg')"></el-image>
            <div class="item-box">
              <h3>
                {{ "adidas Originals and Jonah Hill, united by the Superstar" }}
              </h3>
              <p>
                {{
                  "Jonah Hill and adidas seal their alliance with a Superstar that showcases the creative spirit of the Californian actor and director."
                }}
              </p>
              <span @click="_click(2)">{{ "Read More..." }}</span>
              <div class="data-box">
                {{ "Aug 19, 2020" }}
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { search } from '@/api/user'
export default {
  name: "",
  props: [""],
  data() {
    return {
			searchValue: ''
		};
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    _click(id) {
      this.$router.push({ path: "/blog/detail", query: { id: id } });
    },
		async searchHandle() {
			let params = {
				"searchCriteria[requestName]": this.searchValue,
				"searchCriteria[filterGroups][0][filters][0][field]": '',
				"searchCriteria[filterGroups][0][filters][0][value]": '',
				"searchCriteria[filterGroups][0][filters][0][conditionType]": 'eq',
				"searchCriteria[sortOrders][0][field]": 'created_at',
				"searchCriteria[sortOrders][0][direction]": 'DESC',
				"searchCriteria[pageSize]": 100,
				"searchCriteria[currentPage]": 1,
			}
			search(params).then(res => {
				console.log(res)
			}).catch(error => {})
		}
  },

  watch: {}
};
</script>
<style lang="scss" scoped>
.blog-box {
  min-height: 700px;
  .blog-search-box {
    width: 235px;
    text-align: center;
    margin: 30px auto 50px;
    position: relative;

    input {
      width: 100%;
      height: 30px;
      border: 0;
      border-bottom: 1px solid #e2e2e2;
      margin-bottom: 10px;
      outline: 0;
      font-size: 14px;
      color: #000;
      padding: 5px 0;
      padding-right: 30px;
      border-radius: 5px;

      &:focus {
        border-bottom-color: #1a1a1a;
      }

      &::-webkit-input-placeholder {
        /* Chrome/Opera/Safari */
        color: #999;
      }

      &::-moz-placeholder {
        /* Firefox 19+ */
        color: #999;
      }

      &:-ms-input-placeholder {
        /* IE 10+ */
        color: #999;
      }

      &:-moz-placeholder {
        /* Firefox 18- */
        color: #999;
      }
    }
    i {
      position: absolute;
      right: 5px;
      top: 8px;
      cursor: pointer;
    }
  }
  .blog-container {
    display: flex;
    margin-bottom: 20px;
    & > div {
      width: 50%;
    }
    & > .item-box {
      padding: 0 40px 40px;
      position: relative;
      h3 {
        margin: 0;
      }
      p {
        font-size: 14px;
        line-height: 1.5;
      }
      span {
        text-decoration: underline;
        font-size: 15px;
        cursor: pointer;
      }
      .data-box {
        position: absolute;
        bottom: 0px;
        font-size: 14px;
      }
    }
  }
}
</style>
